<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function todolist() {
        fetch("/todo")
            .then(response => response.json())
            .then(data => {
                    document.getElementById('listBox').innerHTML = "";
                    var opratorData = data.todo;
                    console.log(opratorData)
                    for (var i = 0; i < opratorData.length; i++) {
                        if (!opratorData[i].completed) {
                            var opts = '<li>' + '<input style="background-color: lightgreen" type="button" value="&nbsp;">' + '&nbsp;' + opratorData[i].title + '</li>'
                            document.getElementById('listBox').innerHTML += opts;
                        }
                    }
                }
            )
            .catch(err => console.log("程序出错", err))
    }

    function creat_todo() {
        var title = document.getElementById('todoTitle').value;
        var url = '/todo'
        var headers = {"Content-Type": "application/x-www-form-urlencoded"}
        fetch(url, {
            method: 'GET',
            body: JSON.stringify(title),
            headers: headers
        }).then(res => res.json())
            .then(function (data) {
                console.log(data)
                console.log('title' in data);
                if ('title' in data) {
                    document.getElementById('todoTitle').value = '';
                    todolist()
                }
            })
    }
</script>
<body onload="todolist()">
<div class="app-container" id="taskList">
    <h1 class="app-header">待办事项清单</h1>
    <div class="add-task">
        <input type="text" autocomplete="off" placeholder="添加新事项" class="task-input" name="list" id="todoTitle">
        <input type="submit" value="+" class="submit-task" onclick="creat_todo()" title="Add Task">
    </div>
</div>
<ul class="task-list" id="listBox">
</ul>
</body>
</html>
